<template>
  <div class="passsword question">
    <div class="pwd-header">
      <img src="~@/assets/img/logo2.png" alt="octopus" @click="$router.replace({ name: 'login' })" />
      <p>密保问题找回密码</p>
      <div class="login" @click="$router.replace({ name: 'login' })">
        <icon-svg name="iconUserName"></icon-svg> 登录
      </div>
    </div>
    <div class="pwd-content">
      <div class="content-wrap">
        <el-steps :active="step" finish-status="success" align-center>
          <el-step title="步骤 1" description="验证身份"></el-step>
          <el-step title="步骤 2" description="重设登录密码"></el-step>
          <el-step title="步骤 3" description="完成"></el-step>
        </el-steps>
        <div v-if="step === 0">
          <div class="item-title">安全保护问题将作为重要的身份验证方式，请认真设置。</div>
          <el-form
            ref="editForm"
            :model="editForm"
            :rules="editFormRules"
            label-width="120px"
            @keyup.enter.native="onSubmit()"
          >
            <template v-if="editForm.firstQuestion">
              <el-form-item label="问题" prop="firstQuestion">
                <el-input v-model="editForm.firstQuestion" disabled></el-input>
              </el-form-item>
              <el-form-item label="答案" prop="firstAnswer">
                <el-input v-model="editForm.firstAnswer" placeholder="请输入对应问题的答案"></el-input>
              </el-form-item>
            </template>
            <template v-if="editForm.secondQuestion">
              <el-form-item label="问题" prop="secondQuestion">
                <el-input v-model="editForm.secondQuestion" disabled></el-input>
              </el-form-item>
              <el-form-item label="答案" prop="secondAnswer">
                <el-input v-model="editForm.secondAnswer" placeholder="请输入对应问题的答案"></el-input>
              </el-form-item>
            </template>
            <template v-if="editForm.thirdQuestion">
              <el-form-item label="问题" prop="thirdQuestion">
                <el-input v-model="editForm.thirdQuestion" disabled></el-input>
              </el-form-item>
              <el-form-item label="答案" prop="thirdAnswer">
                <el-input v-model="editForm.thirdAnswer" placeholder="请输入对应问题的答案"></el-input>
              </el-form-item>
            </template>
            <template v-if="editForm.fourthlyQuestion">
              <el-form-item label="问题" prop="fourthlyQuestion">
                <el-input v-model="editForm.fourthlyQuestion" disabled></el-input>
              </el-form-item>
              <el-form-item label="答案" prop="fourthlyAnswer">
                <el-input v-model="editForm.fourthlyAnswer" placeholder="请输入对应问题的答案"></el-input>
              </el-form-item>
            </template>
            <el-form-item align="right">
              <el-button @click="$router.back()">上一步</el-button>
              <el-button type="primary" @click="onSubmit" v-if="userId">下一步</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div v-else-if="step === 1" class="step2">
          <el-form
            ref="pwdForm"
            :model="pwdForm"
            :rules="pwdFormRules"
            label-width="150px"
            @keyup.enter.native="onSubmitPwd()"
          >
            <el-form-item label="新的登录密码" prop="password">
              <el-input v-model="pwdForm.password" type="password" placeholder="请输入新的登录密码"></el-input>
            </el-form-item>
            <el-form-item label="确认新的登录密码" prop="newPassword">
              <el-input v-model="pwdForm.newPassword" type="password" placeholder="请输入新的登录密码"></el-input>
            </el-form-item>
            <el-form-item label="密码强度">
              <el-progress
                :percentage="pasStrength.progress"
                :show-text="false"
                :stroke-width="12"
                :class="'psd-strength' + pasStrength.level"
              ></el-progress>
              <span class="pas-strength">
                安全级别：<span :class="'psd-strength' + pasStrength.level">{{ pasStrength.label }}</span>
              </span>
            </el-form-item>
            <el-row>
              <el-col :span="24" align="right">
                <div class="tips">建议使用数字、字母和字符的组合密码，提高密码安全等级</div>
              </el-col>
            </el-row>
            <el-form-item align="right">
              <el-button @click="step--">上一步</el-button>
              <el-button type="primary" @click="onSubmitPwd" v-if="userId">下一步</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div v-else-if="step === 2" class="step3">
          <i class="el-icon-success"></i>
          <p>恭喜您，重设密码成功，请<span @click="logout">重新登录</span></p>
          <p class="orange">{{ logTime }}秒后自动跳到登录界面</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import utils from '@/plugins/utils'
export default {
  data() {
    return {
      loginUname: '',
      userId: '',
      step: 0,
      logTime: 3,
      editForm: {
        firstQuestion: '',
        firstAnswer: '',
        secondQuestion: '',
        secondAnswer: '',
        thirdQuestion: '',
        thirdAnswer: '',
        fourthlyQuestion: '',
        fourthlyAnswer: ''
      },
      editFormRules: {
        firstAnswer: [{ required: true, message: '答案不能为空', trigger: 'blur' }],
        secondAnswer: [{ required: true, message: '答案不能为空', trigger: 'blur' }],
        thirdAnswer: [{ required: true, message: '答案不能为空', trigger: 'blur' }],
        fourthlyAnswer: [{ required: true, message: '答案不能为空', trigger: 'blur' }]
      },
      pwdForm: {
        password: '',
        newPassword: ''
      },
      pwdFormRules: {
        password: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
        newPassword: [{ required: true, message: '密码不能为空', trigger: 'blur' }]
      },
      submitParams: {},
      pasStrength: {
        level: 0,
        progress: 0,
        label: '弱'
      }
    }
  },
  created() {
    this.loginUname = this.$route.query.loginUname
    this.getPwdQa()
  },
  watch: {
    'pwdForm.password'(val) {
      let progress = utils.checkStrong(val)
      switch (progress) {
        case 0:
          this.pasStrength.level = 1
          this.pasStrength.progress = 10
          this.pasStrength.label = '很弱'
          break
        case 1:
          this.pasStrength.level = 1
          this.pasStrength.progress = 25
          this.pasStrength.label = '弱'
          break
        case 2:
          this.pasStrength.level = 2
          this.pasStrength.progress = 50
          this.pasStrength.label = '中'
          break
        case 3:
          this.pasStrength.level = 3
          this.pasStrength.progress = 75
          this.pasStrength.label = '强'
          break
        case 4:
          this.pasStrength.level = 4
          this.pasStrength.progress = 100
          this.pasStrength.label = '很强'
          break
      }
    }
  },
  methods: {
    getPwdQa() {
      this.$ajax({
        url: this.$ajax.setUrl('auth/authPwdQa/loginUname/' + this.loginUname),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          if (data.data) {
            this.editForm.firstQuestion = data.data.firstQuestion
            this.editForm.secondQuestion = data.data.secondQuestion
            this.editForm.thirdQuestion = data.data.thirdQuestion
            this.editForm.fourthlyQuestion = data.data.fourthlyQuestion
            this.userId = data.data.userId
          } else {
            this.$message({
              message: '暂未设置密保问题，请选择其他公式或联系管理员',
              onClose: () => {
                this.$router.go(-1)
              },
              duration: 8000
            })
          }
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    onSubmit() {
      this.$refs['editForm'].validate(valid => {
        if (valid) {
          let params = { userId: this.userId }
          if (this.editForm.firstQuestion) {
            params.firstQuestion = this.editForm.firstQuestion
            params.firstAnswer = this.editForm.firstAnswer
          }
          if (this.editForm.secondQuestion) {
            params.secondQuestion = this.editForm.secondQuestion
            params.secondAnswer = this.editForm.secondAnswer
          }
          if (this.editForm.thirdQuestion) {
            params.thirdQuestion = this.editForm.thirdQuestion
            params.thirdAnswer = this.editForm.thirdAnswer
          }
          if (this.editForm.fourthlyQuestion) {
            params.fourthlyQuestion = this.editForm.fourthlyQuestion
            params.fourthlyAnswer = this.editForm.fourthlyAnswer
          }
          this.submitParams = params
          this.$ajax({
            url: this.$ajax.setUrl('auth/authPwdQa/pwdQaLogout'),
            method: 'post',
            data: this.$ajax.setData(this.submitParams)
          }).then(({ data }) => {
            if (data && data.code === '0') {
              this.$message.success(data.data || data.msg)
              this.step++
            } else {
              this.$message.error(data.data || data.msg)
            }
          })
        }
      })
    },
    onSubmitPwd() {
      this.$refs['pwdForm'].validate(valid => {
        if (valid) {
          if (this.pasStrength.level < 2) {
            this.$message.error('密码强度不足，请重新输入')
            return
          }
          if (this.pwdForm.password !== this.pwdForm.newPassword) {
            this.$message.error('两次输入的密码不一致')
            return
          }
          let params = Object.assign({}, this.submitParams, {
            newLoginPwd: this.pwdForm.newPassword,
            pwdStrong: this.pasStrength.level
          })
          this.$ajax({
            url: this.$ajax.setUrl('auth/authPwdQa/pwdByReset'),
            method: 'post',
            data: this.$ajax.setData(params)
          }).then(({ data }) => {
            if (data && data.code === '0') {
              this.$message.success(data.data || data.msg)
              this.step++
              this.timer = setInterval(() => {
                this.logTime--
                if (this.logTime <= 0) {
                  clearInterval(this.timer)
                  this.logout()
                }
              }, 1000)
            } else {
              this.$message.error(data.data || data.msg)
            }
          })
        }
      })
    },
    logout() {
      if (this.timer) clearTimeout(this.timer)
      this.$router.replace({ name: 'login' })
    }
  },
  beforeDestroy() {
    this.timer && clearInterval(this.timer)
  }
}
</script>

<style lang="scss">
.question {
  .el-form {
    width: 400px;
    margin: 20px auto;
    .el-select {
      width: 100%;
    }
    .el-input.is-disabled .el-input__inner {
      color: #606266;
      cursor: default;
    }
  }
  .step2 {
    margin-top: 50px;
    .el-progress {
      display: inline-block;
      width: 55%;
    }
    .pas-strength {
      display: inline-block;
      width: 40%;
      text-align: right;
    }
  }

  .step3 {
    margin-top: 100px;
    i {
      font-size: 100px;
      color: #20b759;
      margin-bottom: 20px;
    }
    p {
      line-height: 30px;
      span {
        color: #3d81ee;
        cursor: pointer;
        margin-left: 10px;
      }
      &.orange {
        color: #ff7a3f;
      }
    }
  }
}
</style>
